<template>
<!-- 首页导航分类组件 -->
  <div class="home-classify">
    <ul>
      <!-- 路由跳转到对应的页面 -->
      <li v-for="(item,index) in list" :key='index'
       @click="$router.push('/productList/'+item.categoryId)">
        <img :src="item.imgUrl" alt="">
        <span>{{item.name}}</span>
        </li>
    </ul>
  </div>
</template>

<script>
// 获取首页导航分类数据
import {category} from '../../../api/index.js'
export default {
  data(){
    return {
      list:[]
    }
  },
  mounted(){
    category((res)=>{
      this.list = res.data.data
    })
  }
}
</script>

<style scoped>
  .home-classify{
    width: 100%;
    margin-bottom: 26px;
  }
  .home-classify ul{
    display: flex;
    flex-wrap: wrap;
  }
  .home-classify li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    flex: 20%; 
    height: 150px;
  }
  .home-classify li img{
    width: 80px;
    height: 80px;
  }
</style>